<template>
	<view class="box">
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- #ifndef MP-WEIXIN -->
			图片查看
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text style="margin-left:75rpx">图片查看</text>
			<!-- #endif -->
			<view class="image2" @click="allPictures">全部图片</view>
		</view>
		<view class="pictureTab">
			<view :class="tabData==1?'active':'item'" @click="tabClick(1)">车身外观</view>
			<view :class="tabData==2?'active':'item'" @click="tabClick(2)">仪表中控</view>
			<view :class="tabData==3?'active':'item'" @click="tabClick(3)">车厢座椅</view>
		</view>
		<swiper :current="current"  @change="swiperC1">
			<swiper-item :catchtouchmove="catchtouch" v-for="(item,index) in swiperList" :key="index">
				<movable-area scale-area class="movable-area">
				    <movable-view class="movable-view" direction="all" scale="true"
					scale-min="1" scale-max="4" :scale-value="scale" @dblclick="dblclick">
				        <image style="width: 750rpx;max-width: none;height: 100%;" :src="item" mode="aspectFit"></image>
				   </movable-view>
				</movable-area>
			</swiper-item>
		</swiper>
		<view class="zhis">
			{{current+1}}/{{swiperList.length}}
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	let statusBarHeight;
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = 106;
	//  #endif
	export default{
		data(){
			return{
				tabData:1,
				statusBarHeight,
				id:"",
				pictureType:"2",
				swiperList:[],
				current:0,
				scale:1,
				catchtouch:true
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"]),
		},
		onLoad(options) {
			this.id = options.id;
			this.ImgData()
		},
		methods:{
			swiperC1(e) {
			  this.current = e.detail.current;
			},
			dblclick() {
			    if (this.scale == 4) {
			        this.scale = 1;
			    } else {
			        this.scale = 4;
			    }
				if(this.scale==1){
					this.catchtouch=true
				}else{
					this.catchtouch=false
				}
			},
			// 获取车辆图片
			ImgData(){
				this.$myRequest
					.get("/api/mobile/vehicleOwner/queryVehiclePicturesByPictureType", {
						vehicleId: this.id,
						pictureType:this.pictureType
					})
					.then(res => {
						if (this.pictureType==2) {
							this.swiperList=res.vehicleInPicture[0].bodyAppearance.split("|")
						}else if(this.pictureType==3){
							let ss=res.vehicleInPicture[0]
							this.swiperList=res.vehicleInPicture[0].instrumentCentralControl.split("|")
						}else{
							this.swiperList=res.vehicleInPicture[0].carSeat.split("|")
						}
					});
			},
			tabClick(index){
				this.tabData=index
				if (index==1) {
					this.pictureType=2
				}else if (index==2) {
					this.pictureType=3
				}else{
					this.pictureType=4
				}
				this.current=0
				this.ImgData()
			},
			allPictures(){
				uni.navigateTo({
					url: "/pages_owner/index/allPictures?id="+this.id
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1,
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	/deep/ uni-swiper{
		height: 65%;
	}
	/deep/ swiper{
		height: 65%;
	}
	/deep/uni-movable-area{
		width: 100%;
		height: 100%;
	}
	/deep/uni-movable-view{
		width: 100%;
		height: 100%;
	}
	/deep/movable-area{
		width: 100%;
		height: 100%;
	}
	/deep/movable-view{
		width: 100%;
		height: 100%;
	}
	.box{
		background-color: #000;
		height: 100vh;
	}
	.tou {
	  position: relative;
	  width: 100%;
	  // height: 88rpx;
	  text-align: center;
	  line-height: 88rpx;
	  font-size: 36rpx;
	  color: #fff;
	  background-color: #64b6a8;
			/* #ifdef MP-WEIXIN */
			text-align: left;
			display: flex;
			align-items: center;
			/* #endif */
			
	  .image1 {
	    position: absolute;
	    width: 32rpx;
	    height: 32rpx;
	    // top: 116rpx;
	    left: 30rpx;
	  }
	
	  .image2 {
	    position: absolute;
	    width: 145rpx;
	    height: 56rpx;
	    // top: 28rpx;
	   /* #ifdef MP-WEIXIN */
	   position: initial;
	   margin-left: auto;
	   margin-right: 200rpx;
	   /* #endif */
	   bottom: 16rpx !important;
		right: 30rpx;
		line-height: 56rpx;
	  }
	}
	.pictureTab{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 50rpx;
		margin-bottom: 140rpx;
		.item{
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
		.active{
			font-size: 36rpx;
			font-weight: 600;
			color: #64B6A8;
		}
	}
	.zhis{
		color: #fff;
		font-size: 30rpx;
		margin-top: 15rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10%;
	}
</style>